<template>
  <div>
    <button @click="config.locale = 'zh'">中文</button>
    <button @click="config.locale = 'en'">英文</button>
    <button @click="config.locale = 'fr'">法语</button>
    <div>{{ t('morning') }}</div>
    <div>{{ t('wenhou') }}</div>
  </div>
</template>

<script>
export default {
// 1. 翻译函数
// 2. 翻译字典
// 3. 指定当前翻译语言
  data() {
    return {
      config: {
        locale: 'zh',
        messages: {
          zh: {
            morning: '早上好',
            wenhou: '吃了吗'
          },
          en: {
            morning: 'Good Morningg',
            wenhou: 'have you eat?'
          },
          fr: {
            morning: 'Bonjou!',
            wenhou: 'Avez vous manger?'
          }
        }
      }
    }
  },
  methods: {
    t(oldStr) {
      // 翻译逻辑
      const lang = this.config.locale
      const langPackage = this.config.messages[lang]
      const newStr = langPackage[oldStr]
      return newStr
    }
  }
}
</script>

<style>

</style>
